<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>二维码识别后台程序</title>
  <!--    引入css文件-->
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css" type="text/css">
  <style>
    body {
      background-color: #eeeeee;
    }

    .container {
      margin: 0 auto;
      /*width: 95%;*/
      /*background-color: #fff;*/
      /*height: 100vh;*/
    }

    .layui-form-select {
      width: 240px;
      display: inline-block;
    }

    .layui-tab {
      margin-top: 0;
    }

    .layui-tab-title {
      background-color: #fff;
      padding: 20px 3% 0;
      padding-bottom: 1px;

    }

    .layui-tab-content {
      padding-top: 10px;
    }

    #stat_page,#user_page,#relation_page {
      position: absolute;
      width: 100%;
      background-color: #eeeeee;
    }
  </style>
  <!--   引入js文件-->
  <script th:src="@{/jquery.min.js}" src="../static/jquery.min.js" type="text/javascript"></script>
  <script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" type="text/javascript"></script>
</head>

<body>
  <div class="container">
    <div class="layui-tab layui-tab-brief">
      <!--选项卡-->
      <ul class="layui-tab-title">
        <li class="layui-this">场站</li>
        <li>用户</li>
        <li>对应关系</li>
      </ul>
      <!--内容-->
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <iframe src="/qrdepot/list" frameborder="0" width="100%" id="stat_page">场站页面未正常显示</iframe>
        </div>
        <div class="layui-tab-item">
          <iframe src="/user/list" frameborder="0" width="100%" id="user_page">用户页面未正常显示</iframe>
        </div>
        <div class="layui-tab-item">
          <iframe src="/qruseranddepot/list?type=1" frameborder="0" width="100%" id="relation_page">对应关系页面未正常显示</iframe>
        </div>
      </div>

    </div>
  </div>

  <script th:inline="javascript">
    let data = /*[[${result.data}]]*/{}

    // 刷新 切换时存储页面顺序
    $('.layui-tab-title li').click(function () {
      let picTabNum = $(this).index();
      sessionStorage.setItem("picTabNum", picTabNum);
      // 刷新时场站页面宽度不正常时刷新场站页面
      if(picTabNum == 0) {
        setTimeout(function (){
          let stat_page = document.getElementById('stat_page').contentWindow
          let table_width = stat_page.document.getElementsByClassName('layui-table')[0].style.width
          let table_width_jq = $('#stat_page').contents().find('.layui-table').width()
          let table_box_width = stat_page.document.getElementsByClassName('layui-table-box')[0].style.width
          let table_box_width_jq = $('#stat_page').contents().find('.layui-table-box').width()
          if( Math.abs(table_width_jq) - Math.abs(table_box_width_jq) > 10) {
            stat_page.location.reload()
          }
        },0)
      }
    })
    // 刷新保持在当前页面
    $(function () {
      let getPicTabNum = sessionStorage.getItem("picTabNum");
      // console.log(getPicTabNum);
      if (!getPicTabNum && typeof (getPicTabNum) != "undefined" && getPicTabNum != 0) {
        // alert("null");
        $('.layui-tab-title li').eq(0).addClass("layui-this").siblings().removeClass("layui-this");
        $('.layui-tab-content>div').eq(0).addClass("layui-show").siblings().removeClass("layui-show");
      } else {
        $('.layui-tab-title li').eq(getPicTabNum).addClass("layui-this").siblings().removeClass("layui-this");
        $('.layui-tab-content>div').eq(getPicTabNum).addClass("layui-show").siblings().removeClass("layui-show");
      }
    })

    // 给iframe设置高度
    function setIframeHeight () {
      let statIframe = document.getElementById("stat_page")
      let userIframe = document.getElementById("user_page")
      let relationIframe = document.getElementById("relation_page")

      let clientHigh = document.body.clientHeight
      let innerHigh = window.innerHeight
      let iframeHigh = innerHigh - 75
      statIframe.height = iframeHigh
      userIframe.height = iframeHigh
      relationIframe.height = iframeHigh
    }

    setIframeHeight()

  </script>

</body>

</html>